<template>
  <scroll ref="suggest" class="suggest" :dataA="result" :pullup="pullup"
		:beforeScroll="beforeScroll"
		@scrollToEnd="searchMore"
		@beforeScroll="listScroll"
  >
	<ul class="suggest-list">
		<li @click="selectItem(item,index)" selectItem  class="suggest-item" v-for="(item,index) in result">
		  <div class="icon">
		    <i :class="getIconCls(item,index)"></i>
		  </div>
		  <div class="name">
		    <p class="text" v-html="getDisplayName(item,index)"></p>
		  </div>
		</li>
		<!-- &&hasMore -->
		<loading v-show="hasMore&&goongdata.length>0" title=""></loading>
		<!-- !hasMore&& -->
		<h4 class="tiptext" v-show="comedata==page">
				我已经没有数据拉～求求你不要在拉了
		</h4>
    </ul>
		 <!-- 暂无 -->
    <div v-show="!hasMore && !result.length" class="no-result-wrapper">
      <no-result title="抱歉，暂无搜索结果"></no-result>
    </div>
</scroll>
</template>

<script>
	
import {ERR_OK} from 'api/config'
import NoResult from 'base/no-result/no-result'
import Loading from 'base/loading/loading'
import {VoCalist} from 'api/singer' //首页请求方式
import Scroll from 'base/scroll/scroll'
import Singer from 'common/js/singer'
import {mapMutations, mapActions} from 'vuex'
const perpage = 20 
export default {
  name: 'suggest',
	props: {
		showSinger: {//是否展示歌手
			type: Boolean,
			default: true
		},
		query: {
			type: String,
			default: '55'
		},
		perlength:{ //默认显示一次性加载多少条数
			type: Number,
			default: 15
		}
	},
	data() {
	  return {
			page: 1,
			pullup: true,//下拉刷新
			beforeScroll: true,//失去焦点
			hasMore: true,//是否加载完标志位
			result: [],
			comedata:[],
			goongdata:"",//页码
	  }
	},
	methods: {
		refresh() {
			this.$refs.suggest.refresh()
		},
		search() { //搜索事件
			this.page = 1
			this.comedata=[]
			this.hasMore = true
			this.$refs.suggest.scrollTo(0, 0)
			let url=VoCalist(this.query,1)
			this.$axios.get(url).then((res)=>{
				if(res.status==200){
					this.yema=[]
					let s=0;
					let up=0;
					res.data!=[]?(this.goongdata=res.data.data):(this.goongdata=[])//是否有数据 
					this.comedata=Math.ceil(res.data.data.length/this.perlength)//判断多少页
					this.result = res.data.data.slice(0, this.perlength)
					this._checkMore(this.goongdata)
				}
			}).catch((err)=>{console.log(err)})
		},
		selectItem(item,index) {//点击跳转
			if (index === 0) {
				const singer = new Singer({
					id: item.id, 
					name: item.singer,
					isimg:true
				})
				this.$router.push({path:`/search/${item.id}`}),
				this.setSinger(singer) //歌手数据
			} else {
				let obj={
					 data:this.goongdata,
					 index
				}
				this.insertSong(item)
			}
			this.$emit('select', item)
	},
		searchMore() { //上拉刷新事件
			if (!this.hasMore) {return}
			if(this.page>=this.comedata){ //总数据不能大于页面
				console.log("我已经没有数据拉～求求你不要在拉了")
				this.hasMore=false
				return
			}
			this.page++
			this.result=this.goongdata.slice(0, this.perlength*(this.page))
		},
		listScroll() {//失去焦点
			this.$emit('listScroll')
		},
		_checkMore(data) { //是否还有数据  是否需要上拉加载
			const song = data
			if (!song.length || this.perlength>=song.length) {
				this.hasMore = false
			}
		},
		getDisplayName(item,index) { //获取歌手姓名 歌曲信息
			if (index === 0) {
				return item.singer
			} else {
				return `${item.name}-${item.singer}`
			}
		},
		getIconCls(item,index) { //歌手音乐头像
			if (index === 0) {
				return 'icon-mine'
			} else {
				return 'icon-music'
			}
		},
		...mapMutations({
        setSinger: 'SET_SINGER', //歌手数据
      }),
      ...mapActions([
        'insertSong'
      ])
	},
	watch: {
		query(newQuery) {
			if(newQuery){
				this.search(newQuery)
			}
		}
	},
	components: {
		Scroll,
		Loading,
		NoResult
	}
}
</script>

<style lang="scss" scoped >
		.suggest{
			height: 100%;
			overflow:hidden;
			.suggest-list{
				padding: 0 30px;
				.tiptext{
					font-size: 14px;
					text-align: center;
					padding: 0 0 40px 0;
				}
				.suggest-item{
					display: flex;
					align-items: center;
					padding-bottom: 20px;
				}
				.icon{
					flex:  0 0 30px;
					width: 30px;
					[class^="icon-"]{
          font-size: 14px;
          color: $color-text-d;}
				}
				.name{
					flex: 1;
					font-size: $font-size-medium;
					color: $color-text-d;
					overflow: hidden;
					.text{
						@include no-wrap();
					}
				}
			}
			.no-result-wrapper{@include jucen()}
		}
</style>